<template>
  <swiper
    :slides-per-view="3"
    :space-between="5"
    :pagination="{ clickable: true }"
    @swiper="onSwiper"
    :modules="[Pagination]"
    @slideChange="onSlideChange"
  >
    <swiper-slide>
      <img src="https://100000063-1252208446.file.myqcloud.com/images/分享图-1V11.jpg" alt="slide 1" />
    </swiper-slide>
    <swiper-slide>
      <img src="https://100000063-1252208446.file.myqcloud.com/images/分享图-1V11.jpg" alt="slide 2" />
    </swiper-slide>
    <swiper-slide>
      <img src="https://100000063-1252208446.file.myqcloud.com/images/分享图-1V11.jpg" alt="slide 3" />
    </swiper-slide>
    <swiper-slide>
      <img src="https://100000063-1252208446.file.myqcloud.com/images/分享图-1V11.jpg" alt="slide 4" />
    </swiper-slide>
    <swiper-slide>
      <img src="https://100000063-1252208446.file.myqcloud.com/images/分享图-1V11.jpg" alt="slide 5" />
    </swiper-slide>
    <swiper-slide>
      <img src="https://100000063-1252208446.file.myqcloud.com/images/分享图-1V11.jpg" alt="slide 6" />
    </swiper-slide>
  </swiper>
</template>

<script setup>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';
// Import Swiper styles
import 'swiper/css';
import 'swiper/css/pagination';  // 确保引入分页器的样式
  // import required modules
  import { Pagination } from 'swiper/modules';
// Swiper events
const onSwiper = (swiper) => {
  console.log(swiper);
};

const onSlideChange = () => {
  console.log('slide changed');
};
</script>
<style scoped lang="scss">
/* 自定义分页器样式 */
/* 分页器容器 */
::v-deep .swiper-pagination {
  bottom: 10px; /* 调整分页器距离底部的距离 */
}

/* 分页器小圆点的样式 */
 ::v-deep .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #000;
  opacity: 1;
  margin: 0 5px; /* 调整小圆点之间的间距 */
}

/* 当前激活的小圆点的样式 */
::v-deep .swiper-pagination-bullet-active {
  background-color: #ff5722; /* 激活状态下的颜色 */
  width: 16px;
  height: 16px;
  transform: scale(1.2); /* 使激活的小圆点稍微放大 */
}
</style>
